<!--
 * @Date: 2022-07-04 14:33:48
 * @LastEditTime: 2022-07-14 10:23:58
-->
<template>
  <div id="up-main" v-loading="loading">
    <div id="up-top">
      <img :src="baseUrl + '/avator/' + userInfo.pic" alt="" id="up-avatar" v-if="!loading">
      <div id="up-info">
        <div>{{userInfo.nickname}}</div>
        <div class="up-info-p">{{userInfo.sex == 0 ? '男' : '女'}}</div>
        <div class="up-info-p">{{userInfo.birth}}</div>
        <div class="up-info-p">{{userInfo.email}}</div>
        <div class="up-info-p">{{userInfo.phone}}</div>
      </div>
    </div>
    <div id="up-bottom">
      <el-button class="up-btn" size="mini" type="primary" @click="follow" v-if="!hasFollow">关注</el-button>
      <el-button class="up-btn" size="mini" type="primary" @click="deleteFollow" v-else>取消关注</el-button>
      <el-button class="up-btn" size="mini" type="primary" @click="chat">私信</el-button>
    </div>
  </div>
</template>

<script>
import { getOneUserInfo, follow, findOwnFollow, deleteFollow } from '@/api/user'
export default {
  name: 'UserPanel',
  data () {
    return {
      userInfo: {
      },
      baseUrl: this.picbed,
      loading: true,
      userId: this.$store.state.userInfo.uid,
      pathId: this.$route.params.id,
      hasFollow: false
    }
  },
  methods: {
    follow: function () {
      follow(this.pathId)
        .then(res => {
          if (res.data.state === 200) {
            this.getFollows()
          } else {
            this.$message({
              message: res.data.message
            })
          }
        })
    },
    deleteFollow () {
      deleteFollow(this.pathId)
        .then(res => {
          if (res.data.state === 200) {
            this.getFollows()
          }
        })
    },
    chat: function () {
      this.$router.push('/chat/' + this.pathId)
    },
    getPathUserInfo: function () {
      // console.log(this.$route.params)
      const pathId = this.$route.params.id
      if (pathId === this.$store.state.userInfo.uid) {
        Object.assign(this.userInfo, this.$store.state.userInfo)
      } else {
        getOneUserInfo(pathId)
          .then(res => {
            if (res.data.state === 200) {
              Object.assign(this.userInfo, res.data.data)
              // console.log(this.userInfo)
            } else {
              this.$message({
                message: res.data.message,
                type: 'error'
              })
            }
            this.loading = false
          })
      }
      // console.log(this.userInfo)
    },
    getFollows: function () {
      findOwnFollow()
        .then(res => {
          if (res.data.state === 200) {
            for (let i = 0; i < res.data.data.length; i++) {
              console.log(res.data.data[i].uid2)
              if (String(res.data.data[i].uid2) === String(this.pathId)) {
                this.hasFollow = true
                return
              }
            }
            this.hasFollow = false
          }
        })
    }
  },
  mounted () {
    this.getPathUserInfo()
    this.getFollows()
  },
  created () {
    this.getPathUserInfo()
  }
}
</script>

<style>
#up-main {
  margin-top: 40px;
  border-radius: 5px;
  height: 200px;
  width: calc(100% - 42px);
  padding: 20px;
  background: rgb(255, 246, 237);
  border: 1px solid rgba(229, 230, 235, 0.3);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
#up-avatar {
  height: 120px;
  width: 120px;
}
#up-top {
  display: flex;
}
#up-info {
  margin-left: 20px;
}
.up-info-p {
  font-size: 10px;
  margin-top: 5px;
}
#up-bottom {
  width: 100%;
}
</style>
